<template>
	<div class="card">
		<div class="title">
			设置密码
		</div>
		<el-form :model="passwordData" label-position="top" ref="formRules" :rules="rules">
			<el-form-item label="密码" prop="password">
				<template #label>
					<div class="label-title">
						密码
					</div>
				</template>
				<el-input class="h-58px" v-model="passwordData.password" style="font-size: 18px;" placeholder="请输入密码"
					show-password />
			</el-form-item>
			<el-form-item label="密码" prop="confirmPassword">
				<template #label>
					<div class="label-title">
						确认密码
					</div>
				</template>
				<el-input class="h-58px " v-model="passwordData.confirmPassword" style="font-size: 18px;"
					placeholder="请再次输入新密码确认" show-password />
			</el-form-item>
			<el-form-item label="手机验证" prop="checkCode">
				<template #label>
					<div class="label-title">
						手机验证
					</div>
				</template>
				<template #default>
					<el-input class="h-58px " v-model="passwordData.checkCode" style="font-size: 18px;" placeholder="请输入验证码"
						show-password />
					<div class="check-code" @click="checkCodeClick">
						{{ checkCodeSend }}
					</div>
				</template>
			</el-form-item>
			<el-form-item>
				<el-button class="btn" type="primary" @click="submitClick(formRules)" color="#114CEE">注册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus';


const formRules = ref<FormInstance>();
// 密码确认
interface IFormData {
	password: string;
	confirmPassword: string;
	checkCode: string;
}

const passwordData = ref<IFormData>({
	password: '',
	confirmPassword: '',
	checkCode: ''
});

// 验证码发送，一分钟内不能重复发送
const checkCodeSend = ref<string>('发送验证码');
const sendTime = ref<number>(60);
// 点击发送验证码
const checkCodeClick = () => {
	if (sendTime.value > 0 && sendTime.value !== 60) {
		return;
	} else {
		sendTime.value = 60;
		checkCodeSend.value = `${sendTime.value}s后重新发送`;
		const timer = setInterval(() => {
			sendTime.value--;
			checkCodeSend.value = `${sendTime.value}s后重新发送`;
			if (sendTime.value === 0) {
				clearInterval(timer);
				checkCodeSend.value = '发送验证码';
			}
		}, 1 * 1000);
	}
}

// 首次输入密码校验，密码格式要求
const passwordValidate = (rule: any, value: string, callback: any) => {
	if (value === '') {
		return callback(new Error('请输入密码'));
	} else {
		// validateField
		if (passwordData.value.confirmPassword !== '') {
			formRules.value?.validateField('confirmPassword', (error: any) => {
				console.log(error)
				if (!error) {
					return callback(new Error('两次输入密码不一致!'));
				} else {
					return callback();
				}
			});
		}
		else{
			return callback();
		}
	}
};
// 重复输入密码验证
const confirmPasswordValidate = (rule: any, value: string, callback: any) => {
	if (value === '') {
		console.log('formRules')
		return callback(new Error('请再次输入密码'));
	} else if (value !== passwordData.value.password) {
		return callback(new Error('两次输入密码不一致!'));
	} else {
		return callback();
	}
};
// 输入验证码，要求验证码为6位数字
const checkCodeValidate = (rule: any, value: string, callback: any) => {
	if (value === '') {
		return callback(new Error('请输入验证码'));
	} else if (value.length !== 6) {
		return callback(new Error('验证码为6位数字'));
	} else {
		return callback();
	}
};
// 输入框校验规则
const rules = {
	password: [
		{
			validator: passwordValidate,
			trigger: 'change'
		}
	],
	confirmPassword: [
		{
			validator: confirmPasswordValidate,
			trigger: 'change'
		}
	],
	checkCode: [
		{
			validator: checkCodeValidate,
			trigger: 'blur'
		}
	]
}

// 注册按钮提交
const submitClick = (formEl: FormInstance | undefined) => {
	console.log(formEl);
	if (!formEl) return;
	// 验证
	formEl.validate((valid: boolean): any => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!!');
			return false;
		}
	});
}

</script>
<style lang="scss" scoped>
.card {
	box-sizing: border-box;
	width: 25vw;
	padding: 30px;
	background: #FFF;
	border: 1px solid #E5E6EB;
	border-radius: 16px;
	height: 606px;

	>div {
		margin: 20px 0;
	}

	.title {
		margin: 30px 0;
		font-family: "Microsoft YaHei", "Microsoft YaHei";
		font-size: 34px;
		font-weight: bold;
		color: #000;
	}


	.label-title {
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 14px;
		color: #86909C;
	}

	.check-code {
		position: absolute;
		right: 20px;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 18px;
		cursor: pointer;
		color: #000000;
	}

	.btn {
		width: 100%;
		height: 50px;
		font-family: "Microsoft YaHei", "Microsoft YaHei";
		font-size: 18px;
		font-weight: 400;
		color: #FFF;
		margin-top: 50px;
	}


}
</style>
